<!--
* @Author: white_queen
* @Date: 2024-07-19 17:39:10
* @LastEditors: white_queen
* @LastEditTime: 2024-07-19 17:43:33
* @FilePath: /pages/scoreShop/detail/detail.vue
* @Description: 积分商品详情页
-->

<template>
	<view class="page" :style="{ overflow: buyShow ? 'hidden' : 'auto' }">
		<!-- 自定义导航栏 -->
		<u-navbar title="妙缘能量珠宝" bgColor="rgba(255,255,255,0)" :autoBack="true" leftIconColor="#fff" titleStyle="color:#fff"></u-navbar>

		<view class="page-top">
			<view class="bg-view">
				<image class="bg" :src="detail.bg_image" mode="aspectFill"></image>
				<view class="mask"><view class="demo"></view></view>
			</view>
			<image class="bg-center" :src="detail.show_images" mode="aspectFill"></image>
			<view class="bg-bottom">
				<view class="product-name">{{ detail.name }}</view>
				<!-- <view class="product-subtitle">Gate of Mind (Wood)</view> -->
				<view class="product-price">
					<view class="product-price-main">￥{{ price }}</view>
					<!-- <view class="product-price-sub">原价：999</view> -->
				</view>
			</view>
		</view>
		<view class="cell-view">
			<view class="cell-item">
				<view class="item-left">
					<view class="left-title">运费</view>
					<view class="left-content">免运费</view>
				</view>
			</view>

			<view class="cell-item">
				<view class="item-left">
					<view class="left-title">服务</view>
					<view class="left-content">线下门店·快递发货·收货后结算</view>
				</view>
				<image class="right-icon" src="../../../static/icon/right.png" mode="widthFix"></image>
			</view>

			<view class="cell-item">
				<view class="item-left">
					<view class="left-title">选择</view>
					<view class="left-content">
						<view class="content-top">规格</view>
						<view class="content-bottom">
							<!-- <image class="product-img" src="../../../static/logo.png" mode=""></image> -->
							<text class="product-describe">共{{ num }}种规格可选</text>
						</view>
					</view>
				</view>
				<image class="right-icon" src="../../../static/icon/right.png" mode="widthFix"></image>
			</view>

			<view class="cell-item">
				<view class="item-left">
					<view class="left-title">参数</view>
					<view class="left-content">品牌;镶嵌材质</view>
				</view>
				<image class="right-icon" src="../../../static/icon/right.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="details-img">
			<view class="title">
				<view class="title-item">
					商品
					<view class="title-item-line"></view>
				</view>
			</view>
			<view class="images">
				<image v-for="(item, index) of detail.details" :key="index" class="images-item" :src="item" mode="widthFix"></image>
			</view>
		</view>
		<view class="buy-buttons">
			<view @click="buy('buy')" class="buy">立即购买</view>
		</view>
		<!-- 购买弹窗 -->
		<u-popup :show="buyShow" :safeAreaInsetBottom="true" :closeable="true" @close="close" round="20" :overlayStyle="{ 'touch-action': 'none' }">
			<view class="buy-view">
				<view class="title">选择规格</view>
				<view class="shop-info">
					<image class="img" :src="detail.show_images" mode="aspectFill"></image>
					<view class="info-text">
						<view class="name">{{ detail.name }}</view>
						<view class="choose">已选：{{ choose }}</view>
						<view class="pirce">${{ price * QuantityNum }}</view>
					</view>
				</view>

				<view class="sku">
					<view class="sku-item" v-for="item in detail.info.sku_list" :key="item.id" v-if="item.id">
						<view class="sku-title">
							{{ item.name }}
						</view>
						<view class="item-value">
							<text class="item-value-text" :class="i.selected == 1 ? 'active' : ''" v-for="i in item.children" :key="i.id" @click="changeSku(i, item)">
								{{ i.name }}
							</text>
						</view>
					</view>
				</view>
				<view class="buyNum">
					<view class="Quantity">数量</view>
					<view class="buyNum-main">
						<image class="subtract" @click="subtract" src="../../../static/icon/subtract.png" mode="widthFix"></image>
						<text class="QuantityNum">{{ QuantityNum }}</text>
						<image class="add" @click="add" src="../../../static/icon/add.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="confirm" @click="confirm">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
// 微信分享 https://blog.csdn.net/fbqgdxw/article/details/126105936
import httpApi from '../../../http/index.js';
import { getUserPrice } from '@/utils/index.js';
export default {
	onLoad(e) {
		console.log(e);
		this.id = e.id;
		this.init();
	},
	data() {
		return {
			id: null,
			detail: {},
			isCollect: false,
			num: 0,
			buyShow: false,
			choose: '',
			QuantityNum: 1, //数量
			idArr: [], //选择的规格id
			price: 0 // 当前价格
		};
	},
	methods: {
		init() {
			this.idArr = [];
			httpApi.ScoreShopApi.getDetail({ goods_id: this.id }).then((res) => {
				this.detail = res.data;
				try {
					this.num = res.data.info.sku_list.length;
				} catch (e) {
					this.num = 0;
				}
				this.price = getUserPrice(res.data.info);
				this.updateSku();
				if (res.data.if_collect == 1) {
					this.isCollect = true;
				} else {
					this.isCollect = false;
				}
			});
		},

		// 点击购买按钮
		buy() {
			this.buyShow = true;
		},

		// 选择规格
		changeSku(i, item) {
			for (let sku_i of item.children) {
				sku_i.selected = 0;
			}
			i.selected = 1;
			this.QuantityNum = 1;
			this.updateSku();
		},
		// 更新sku选中状态
		updateSku() {
			let list = this.detail.info.sku_list;
			let chooseArr = [];
			this.idArr = [];
			if (list) {
				for (let item of list) {
					for (let value of item.children) {
						if (value.selected == 1) {
							chooseArr.push(value.name);
							this.idArr.push(value.id);
						}
					}
				}
				httpApi.ScoreShopApi.getPriceBySku({ goods_id: this.id, sku: this.idArr.join(',') }).then((res) => {
					this.idArr = [];
					this.idArr.push(res.data.id);
					this.price = getUserPrice(res.data);
				});
			} else {
				this.idArr.push(this.detail.info.id);
			}
			this.choose = chooseArr.join(',');
		},
		// 点击确定按钮
		async confirm() {
			let data = {
				goods_id: this.id,
				spec_id: this.idArr.join(','),
				buy_num: this.QuantityNum
			};
			// 点击购买跳转页面 => 确认订单,提交订单
			uni.navigateTo({
				url: '/pages/shopping/pay/pay?params=' + JSON.stringify(data)
			});
		},
		// 规格数量 减少
		subtract() {
			if (this.QuantityNum > 1) {
				this.QuantityNum -= 1;
			}
		},
		// 规格数量 添加
		add() {
			this.QuantityNum += 1;
		},
		// 关闭所有弹窗
		close() {
			this.buyShow = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	height: 100vh; // 固定高度
	overflow-y: scroll; // 超出滚动
	overscroll-behavior: none; // 禁止滚动溢出
}
.page-top {
	width: 750rpx;
	position: relative;
	.bg-view {
		width: 100%;
		height: 660rpx;
		position: relative;
		.bg {
			width: 100%;
			height: 660rpx;
			box-sizing: border-box;
		}
		.mask {
			width: 100%;
			height: 100rpx;
			overflow: hidden;
			position: relative;
			top: -98rpx;
			.demo {
				width: 1566rpx;
				height: 1566rpx;
				border-radius: 50%;
				background-color: #fff;
				position: relative;
				left: 50%;
				transform: translate(-50%);
				// top: -94rpx;
			}
		}
	}
	.bg-center {
		width: 211rpx;
		height: 316rpx;
		position: absolute;
		left: 50%;
		top: 450rpx;
		transform: translate(-50%);
	}
	.bg-bottom {
		width: 750rpx;
		height: 366rpx;
		background-color: #fff;
		.product-name {
			margin-top: 44rpx;
			ont-family: SourceHanSerifCN, SourceHanSerifCN;
			font-weight: 400;
			font-size: 32rpx;
			color: #000000;
			line-height: 52rpx;
			text-align: center;
			font-style: normal;
		}
		.product-subtitle {
			margin-top: 8rpx;
			font-family: CormorantSC, CormorantSC;
			font-weight: 400;
			font-size: 24rpx;
			color: #9c9c9c;
			line-height: 32rpx;
			text-align: center;
			font-style: normal;
			text-transform: uppercase;
		}
		.product-price {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 28rpx;
			.product-price-main {
				font-family: SourceHanSerifCN, SourceHanSerifCN;
				font-weight: bold;
				font-size: 24rpx;
				color: $uni-theme-color;
				line-height: 34rpx;
				font-style: normal;
			}
			.product-price-sub {
				font-family: SourceHanSerifCN, SourceHanSerifCN;
				font-weight: 400;
				font-size: 24rpx;
				color: #2e2e2e;
				line-height: 34rpx;
				font-style: normal;
				text-decoration-line: line-through;
				margin-left: 22rpx;
			}
		}
	}
}
.cell-view {
	width: 750rpx;
	margin: 20rpx 0 0;
	background-color: #fff;
	.cell-item {
		width: 670rpx;
		margin: 0 auto;
		padding: 30rpx 0;
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.06);
		display: flex;
		justify-content: space-between;
		.item-left {
			display: flex;
			.left-title {
				font-family: SourceHanSerifCN, SourceHanSerifCN;
				font-weight: 500;
				font-size: 28rpx;
				color: #9f9f9f;
				line-height: 40rpx;
				font-style: normal;
			}
			.left-content {
				margin-left: 42rpx;
				font-family: SourceHanSerifCN, SourceHanSerifCN;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
				display: flex;
				flex-direction: column;
				.content-top {
					font-family: SourceHanSerifCN, SourceHanSerifCN;
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}
				.content-bottom {
					display: flex;
					align-items: center;
					margin-top: 18rpx;
					.product-img {
						width: 48rpx;
						height: 48rpx;
					}
					.product-describe {
						margin-left: 16rpx;
						background: #f9f7fa;
						border-radius: 4rpx;
						font-family: SourceHanSerifCN, SourceHanSerifCN;
						font-weight: 500;
						font-size: 24rpx;
						color: #000000;
						text-align: left;
						font-style: normal;
						padding: 12rpx 16rpx 12rpx 18rpx;
					}
				}
			}
		}
		.right-icon {
			width: 40rpx;
		}
	}
}
.details-img {
	width: 750rpx;
	margin-top: 20rpx;
	padding-bottom: 180rpx;
	.title {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		border: 2rpx solid rgba(0, 0, 0, 0.06);
		.title-item {
			font-family: SourceHanSerifCN, SourceHanSerifCN;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			line-height: 100rpx;
			text-align: center;
			font-style: normal;
			.title-item-line {
				width: 56rpx;
				height: 6rpx;
				background-color: $uni-theme-color;
				border-radius: 4rpx;
				margin: 0 auto;
			}
		}
	}
	.images {
		margin-top: 30rpx;
		width: 750rpx;
		display: flex;
		flex-direction: column;
		.images-item {
			width: 750rpx;
		}
	}
}
.buy-buttons {
	width: 750rpx;
	position: fixed;
	bottom: 0;
	padding-bottom: 84rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	.car {
		width: 50%;
		height: 96rpx;
		box-shadow: 0rpx -2rpx 0rpx 0rpx rgba(0, 0, 0, 0.04);
		display: flex;
		align-items: center;
		justify-content: center;
		background: #cfae7d;
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 500;
		font-size: 28rpx;
		color: #ffffff;
		font-style: normal;
	}
	.buy {
		width: 50%;
		height: 96rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0rpx -2rpx 0rpx 0rpx rgba(0, 0, 0, 0.04);
		background: $uni-theme-color;
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 500;
		font-size: 28rpx;
		color: #ffffff;
		font-style: normal;
	}
}
.buy-view {
	width: 750rpx;
	padding-bottom: 120rpx;
	.title {
		margin-top: 30rpx;
		margin-left: 30rpx;
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		font-style: normal;
	}
	.shop-info {
		display: flex;
		align-items: center;
		margin-top: 72rpx;
		.img {
			width: 160rpx;
			height: 160rpx;
			border-radius: 16rpx;
		}
		.info-text {
			margin-left: 30rpx;
			display: flex;
			flex-direction: column;
			.name {
				font-family: SourceHanSerifCN, SourceHanSerifCN;
				font-weight: 500;
				font-size: 32rpx;
				color: #303133;
				line-height: 46rpx;
			}
			.pirce {
				font-family: SourceHanSerifCN, SourceHanSerifCN;
				font-weight: 600;
				font-size: 28rpx;
				color: #e02020;
				line-height: 40rpx;
				margin-top: 28rpx;
			}
			.choose {
				margin-top: 8rpx;
				font-family: SourceHanSerifCN, SourceHanSerifCN;
				font-weight: 400;
				font-size: 24rpx;
				color: #909399;
				line-height: 34rpx;
			}
		}
	}
	.sku {
		margin-top: 64rpx;
		margin-left: 42rpx;
		.sku-item {
			.sku-title {
				font-family: SourceHanSerifCN, SourceHanSerifCN;
				font-weight: 500;
				font-size: 28rpx;
				color: #303133;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
			}
			.item-value {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 30rpx;
				.item-value-text {
					width: 192rpx;
					height: 64rpx;
					background: #eeeeee;
					border-radius: 10rpx;
					margin-right: 24rpx;
					font-family: SourceHanSerifCN, SourceHanSerifCN;
					font-weight: 400;
					font-size: 24rpx;
					color: #cacaca;
					line-height: 34rpx;
					font-style: normal;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.active {
					color: #fff;
					background-color: $uni-theme-color;
				}
			}
		}
	}
	.buyNum {
		padding: 0 40rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 60rpx;
		.buyNum-main {
			display: flex;
			align-items: center;
			.subtract,
			.add {
				width: 48rpx;
			}
			.QuantityNum {
				font-family: SourceHanSerifCN, SourceHanSerifCN;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
				margin: 0 30rpx;
			}
		}
	}
	.confirm {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		width: 670rpx;
		height: 90rpx;
		margin-top: 30rpx;
		border: 1rpx solid #ffedc4;
		background-color: $uni-theme-color;
		border-radius: 10rpx;
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 500;
		font-size: 32rpx;
		color: #ffffff;
	}
}
</style>